window.addEventListener('load', function() {
    // 获取元素
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    // 鼠标经过按钮显示
    focus.addEventListener('mouseenter', function() {
            arrow_l.style.display = 'block';
            arrow_r.style.display = 'block';
            clearInterval(timer);
            timer = null;
        })
        // 鼠标离开按钮隐藏
    focus.addEventListener('mouseleave', function() {
            arrow_l.style.display = 'none';
            arrow_r.style.display = 'none';
            timer = setInterval(function() {
                arrow_r.click();
            }, 3000)
        })
        // 获取元素
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    for (var i = 0; i <= ul.children.length - 1; i++) {
        // 创建li
        var li = document.createElement('li');
        // 将生成的li添加到ol中
        ol.appendChild(li);
        // 自定义属性得到索引号
        li.setAttribute('index', i)
            // 将ol的第一个li添加类名current
        ol.children[0].className = 'current';
        // 滚动点的排他思想
        var focusClienWith = focus.clientWidth;
        li.addEventListener('mouseenter', function() {
            for (var i = 0; i < ul.children.length - 1; i++) {
                ol.children[i].className = '';
            }
            // 设置当前li的类型为current
            this.className = 'current';
            // 获得当前li的索引号
            var index = this.getAttribute('index');
            // 让num,circle获得跟index值一样
            num = index;
            circle = index;
            // 鼠标经过滚动点移动图片
            animate(ul, -focusClienWith * index);
        })
    };
    var num = 0;
    // 创建一个滚动点变量
    var circle = 0;
    // 克隆第一张图添加到ul最后面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 节流阀
    var flag = true;
    // 点击右侧按钮下一张图
    arrow_r.addEventListener('click', function() {
            if (flag) {
                flag = false;
                if (num == ul.children.length - 1) {
                    ul.style.left = 0;
                    num = 0;
                }
                num++;
                animate(ul, -focusClienWith * num, function() {
                    flag = true; //打开节流阀
                });
                circle++;
                // 如果circle是最后一个滚动时。重新赋值0
                if (circle == ol.children.length) {
                    circle = 0;
                }
                // 调用函数
                circleChange();
            }
        })
        // 左侧按钮点击上一张图
    arrow_l.addEventListener('click', function() {
            if (flag) {
                flag = false;
                if (num == 0) {
                    num = ul.children.length - 1;
                    ul.style.left = num * focusClienWith + 'px';
                }
                num--;
                animate(ul, -focusClienWith * num, function() {
                    flag = true;
                });
                circle--;
                // 如果circle是第一个滚动时。重新赋值0
                if (circle < 0) {
                    circle = ol.children.length - 1;
                }
                // 调用函数
                circleChange();
            }
        })
        // 排他思想，清除其余的current类名
    function circleChange() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    }
    // 定时器自动播放轮播图
    var timer = setInterval(function() {
        arrow_r.click();
    }, 3000);

    // Echarts图表
    (function() {
        var myChart = echarts.init(document.querySelector(".w .chart1"));
        var option = {
            title: {
                text: '曲线图数据展示',
                left: "center",
                top: 12
            },
            xAxis: {
                type: 'category',
                boundaryGap: true,
                data: ['01/26', '01/28', '01/30', '02/01', '02/03', '02/05', '02/07', '02/09', '02/11', '02/13', '02/15', '02/17', '02/19', '02/21', '02/23', ]
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [8972, 6445, 7456, 5854, 8123, 300, 300, 5319, 7463, 1435, 9426, 8187, 8297, 443, 9135],
                type: 'line',
                smooth: true,
                areaStyle: {},
                itemStyle: {
                    normal: {
                        label: {
                            show: true
                        }
                    }
                },
            }],
        };
        myChart.setOption(option);
    })();

    (function() {
        var myChart = echarts.init(document.querySelector(".w .chart2"));
        var option = {
            title: {
                text: '饼状图数据展示',
                left: 'center',
                top: 14
            },
            tooltip: {
                trigger: 'item'
            },
            series: [{
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 9, name: 'Mon' },
                    { value: 11, name: 'Tue' },
                    { value: 13, name: 'Wed' },
                    { value: 10, name: 'Thu' },
                    { value: 8, name: 'Fri' },
                    { value: 11, name: 'Sat' },
                    { value: 5, name: 'Sun' },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        myChart.setOption(option);
    })();

    (function() {
        var myChart = echarts.init(document.querySelector(".w .chart3"));
        var option = {
            title: {
                text: '柱形图数据展示',
                top: 12,
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap: true,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick: {
                    alignWithLabel: true
                }
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                name: '直接访问',
                type: 'bar',
                barWidth: '35%',
                data: [9, 11, 13, 10, 8, 11, 5]
            }]
        };
        myChart.setOption(option);
    })()
})